<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页管理图标测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .test-section {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #fafafa;
        }
        .test-section h3 {
            margin-top: 0;
            color: #666;
        }
        .icon-preview {
            display: flex;
            align-items: center;
            margin: 10px 0;
            padding: 10px;
            background: white;
            border-radius: 4px;
        }
        .icon-preview svg {
            width: 24px;
            height: 24px;
            margin-right: 10px;
            fill: #409EFF;
        }
        .btn {
            background-color: #409EFF;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        .btn:hover {
            background-color: #337ecc;
        }
        .result {
            margin: 10px 0;
            padding: 10px;
            border-radius: 4px;
        }
        .success { background-color: #f0f9ff; border-left: 4px solid #409EFF; }
        .error { background-color: #fef0f0; border-left: 4px solid #f56c6c; }
        .warning { background-color: #fdf6ec; border-left: 4px solid #e6a23c; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🏠 首页管理图标测试</h1>
        
        <div class="test-section">
            <h3>1. 图标预览</h3>
            <div class="icon-preview">
                <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
                </svg>
                <span>home 图标 (首页管理)</span>
            </div>
            <div class="icon-preview">
                <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                </svg>
                <span>tag 图标 (用户标签管理)</span>
            </div>
        </div>

        <div class="test-section">
            <h3>2. 数据库更新</h3>
            <p>执行以下SQL脚本来更新首页管理菜单图标：</p>
            <button class="btn" onclick="showSQL()">显示SQL脚本</button>
            <div id="sqlResult" class="result" style="display:none;">
                <pre>-- 更新首页管理菜单图标
UPDATE sys_menu 
SET icon = 'home' 
WHERE menu_name = '首页管理' AND parent_id = 0;

-- 验证更新结果
SELECT menu_id, menu_name, icon, path 
FROM sys_menu 
WHERE menu_name = '首页管理' AND parent_id = 0;</pre>
            </div>
        </div>

        <div class="test-section">
            <h3>3. 前端验证</h3>
            <p>更新后，首页管理菜单应该显示房子图标 🏠</p>
            <button class="btn" onclick="checkFrontend()">检查前端显示</button>
            <div id="frontendResult" class="result"></div>
        </div>

        <div class="test-section">
            <h3>4. 菜单结构预览</h3>
            <div style="font-family: monospace; background: white; padding: 15px; border-radius: 4px;">
                🏠 首页管理<br>
                ├── 🎠 轮播图管理<br>
                ├── 🏷️ 用户标签管理<br>
                ├── 📝 动态内容管理<br>
                ├── 🔍 互动内容审核<br>
                └── 💕 相亲角内容运营
            </div>
        </div>
    </div>

    <script>
        function showSQL() {
            const result = document.getElementById('sqlResult');
            result.style.display = result.style.display === 'none' ? 'block' : 'none';
        }

        function checkFrontend() {
            const result = document.getElementById('frontendResult');
            result.className = 'result success';
            result.innerHTML = `
                <strong>✅ 前端检查步骤：</strong><br>
                1. 登录管理后台: <a href="http://localhost:80" target="_blank">http://localhost:80</a><br>
                2. 查看左侧菜单栏中的"首页管理"<br>
                3. 确认显示房子图标 🏠<br>
                4. 点击展开查看子菜单<br><br>
                <strong>注意：</strong>需要先执行SQL脚本更新数据库，然后刷新前端页面。
            `;
        }

        // 页面加载时显示提示
        window.onload = function() {
            console.log('首页管理图标测试页面已加载');
        };
    </script>
</body>
</html>
